<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>management</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <a name="top"></a>
        <!-- 顶部 -->
        <div id="headerBottom">
            <div id="header">
                <img id="logo" src="../assets/img/title.png">
                <img class="right" id="headPortrait" src="../assets/img/headoportrait.png"
                    @mouseover="isShowUserInfor=true" @mouseleave="isShowUserInfor=false">
                <h2 v-cloak class="right">你好，{{ userName }}</h2>
                <!-- 覆盖层 -->
                <div v-cloak id="userInfor" v-show="isShowUserInfor" @mouseover="isShowUserInfor=true"
                    @mouseleave="isShowUserInfor=false">
                    <ul>
                        <li><a class="inforItem">查看信息</a></li>
                        <li><a id="logOut" class="inforItem" href="login.html">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 中间 -->
        <div id="basicBox">
            <!-- 导航栏 -->
            <div id="nav">
                <ul>
                    <li class="navItermB" @click="getInfor()">门锁状态</li>
                    <li class="navItermA" @click="getManage()">门锁管理</li>
                    <li class="navItermA" @click="logger()">门锁日志</li>
                </ul>
            </div>
            <!-- 主体数据内容 -->
            <div id="content">
                <div id="checkState">
                    <input id="lockId" type="text" placeholder="输入锁的id">
                    <a class="controlCoin" @click="getIdState()">查询</a>
                    <a class="controlCoin" @click="getAllState()">显示全部</a>
                </div>

                <table>
                    <tr>
                        <th>锁的ID</th>
                        <th>用户名</th>
                        <th>位置</th>
                        <th>上次修改时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <tr v-cloak v-for="item in lockData">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.location }}</td>
                        <td>{{ item.time }}</td>
                        <td>{{ item.state }}</td>
                        <td><a class="controlCoin" @click="changeState(item.id, item.controlState)">{{ item.controlState }}</a></td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 底部 -->
        <div v-cloak id="footerBottom">
            <div id="footer">
                <p><a href="">返回主页</a> | <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="login.html">退出登录</a></p>
            </div>
        </div>
        <!-- 悬浮块 -->
        <a href="#top" id="floatDiv" v-show="isShowToTop"><img src="../assets/img/toTop.png" width="50px"></a>
    </div>
    <!-- 导入相关的js文件 -->
    <script src="index.js"></script>
</body>

</html>